<ng-container *ngIf="!editing; else elseTemplate">
    <m-key-search attr.id="selected" [label_text]="headText" #selectedRef class="mt-2"></m-key-search>
    <m-api-data-table [dataSource]="selectedService$ | async" [searchControl]="selectedRef">
      <ng-container mDataTableColumn header="软件别名">
        <ng-template let-title="title">
          <td [ngStyle]="{'width.%': '95'}">{{ title }}</td>
        </ng-template>
      </ng-container>
    </m-api-data-table>
</ng-container>

<ng-template #elseTemplate>
  <div class="row">
    <div class="col-6">
      <m-key-search attr.id="selectedEdit" [label_text]="headText" #selectedRef></m-key-search>
      <m-api-data-table [dataSource]="selectedService$ | async" [selection]="selection" [searchControl]="selectedRef">
        <ng-container mDataTableColumn header="软件别名">
          <ng-template let-title="title">
            <td [ngStyle]="{'width.%': '95'}">{{ title }}</td>
          </ng-template>
        </ng-container>
      </m-api-data-table>
    </div>

    <div class="col-6">
      <m-key-search attr.id="all" label_text="全部应用" #selectRef></m-key-search>
      <m-api-data-table [dataSource]="dataSource" [selection]="selection" [searchControl]="selectRef">
        <ng-container mDataTableColumn header="软件别名">
          <ng-template let-name="name">
            <td [ngStyle]="{'width.%': '95'}">{{ name }}</td>
          </ng-template>
        </ng-container>
      </m-api-data-table>
    </div>
  </div>
</ng-template>
